<template>
  <div id="editorContent">
    <div style="margin-right: 0">
      <el-input placeholder="新的标题" v-model="newTitle">
        <el-button slot="append" style="background: #ef7a82; color:#fff;" @click="changeTitle()">
          <span class="el-icon-s-promotion">确定</span>
        </el-button>
      </el-input>
      <div class="edit_container" style="min-height: 67vh">
        <MyQuillEditor
          :upload-url="this.$const.domain + '/v1/content/upLoadContentImage'"
          :auth="headers"
          :file-name="'image'"
        ></MyQuillEditor>
      </div>
      <el-switch
        style="float: right; margin-top: 19px;margin-right: 10px"
        v-model="isPublish"
        active-text="发布"
        @change="publish()"
      ></el-switch>
    </div>
  </div>
</template>
<script>
import MyQuillEditor from "@/components/subComponents/MyQuillEditor";
import { myMixin } from "@/assets/js/mixin";

export default {
  mixins: [myMixin],
  components: {
    MyQuillEditor
  },
  data() {
    return {
      isPublish: this.$store.state.res.isPublish == 1 ? true : false,
      newTitle: this.$store.state.res.title,
      changeInputVisable: false
    };
  },
  methods: {
    publish() {
      let flag = this.isPublish ? 1 : 0;
      this.$axios
        .put(
          this.$const.domain + "/v1/content/publishContent",
          {
            isPublish: flag,
            contentId: this.$route.params.id
          },
          {
            headers: this.headers
          }
        )
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.data ? "操作成功" : "操作失败",
              type: res.data.data ? "success" : "warning"
            });
            this.$store.commit("setResPublish", flag);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          this.$message.error("网络错误，不能访问");
        });
    },
    changeTitle() {
      this.$axios
        .put(
          this.$const.domain + "/v1/content/changeContentTitle?contentId="+ this.$route.params.id + "&title=" + this.newTitle,
          {},
          {
            headers: this.headers
          }
        )
        .then(res => {
          if (res.data.code == 200 && res.data.data == true) {
            this.$message({
              message: "标题修改成功",
              type: "success"
            });
            this.$store.commit("setResTitle", this.newTitle);
          }
        });
    }
  }
};
</script>